<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .box {
            width: 170px;
            height: 170px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <parent></parent>
    </div>


    <template id="parent">
        <div>
            <h2>parent = 父组件 - 1</h2>
            <h2>count === {{count}}</h2>
            <h2>msg === {{msg}}</h2>
            <p>
                <input type="text" v-model="msg">
            </p>
            <div class="box" v-if="show">我是被子组件修改的</div>
            <hr>
            <childone
                @eventasdfghj = "getNewCount"
                @changeeed = "changeMymsg"
                :show = "show"
                @changesomeshow = "changeshow"
            >
            </childone>
<!-- 修改数据 -->
        </div>
    </template>
    <template id="childone">
        <div>
            <h2>childone = 子组件 - 1</h2>
            <button @click  = "changepcount">自定义事件 - 修改父组件的count</button>
            <p>
                <input type="text" @input="changehhh">
            </p>
            <button @click="changeshow">自定义事件去修改父组件的show</button>
        </div>
    </template>

    <script>
        Vue.component("myhead", {
            template: "<h2>好好努力吧</h2>"
        })
        Vue.component("parent", {
            template: "#parent",
            methods: {
                todoDone() {
                    console.log("todoDone  任务完成");
                },
                setNewCount(count) {
                    this.count += count;
                },
                setNewMsg(msg) {
                    this.msg = msg;
                },
                setNewShow() {
                    this.show = !this.show;
                },
                getNewCount(n) {
                    this.count += n
                },
                changeMymsg(msg) {
                    this.msg = msg;
                },
                changeshow() {
                    this.show = !this.show;
                }
            },
            data() {
                return {
                    count: 2022,
                    msg: "Are you OK?",
                    show: true
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            methods:{
                changepcount(){
                    //emit   发送
                    this.$emit("eventasdfghj",50)
                },
                changehhh(e){
                    this.$emit("changeeed",e.target.value)
                },
                changeshow(){
                    this.$emit('changesomeshow')
                }
            }
        })
        const vm = new Vue({
            data: {
                title: "子传父"
            },
            components: {
                first: {
                    template: "<h2>First - vue 组件初始化</h2>"
                }
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title
            },
        }).$mount('#app')
    </script>
</body>

</html>